import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
import React from 'react';
import { ColorResult, SketchPicker } from 'react-color';

// 假定 heroui 提供的 Popover组件

interface ColorPickerProps {
  color: string
  onChange: (color: ColorResult) => void
}

const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
  const handleChange = (colorResult: ColorResult) => {
    onChange(colorResult);
  };

  return (
    <Popover triggerScaleOnOpen={false}>
      <PopoverTrigger>
        <div
          className='w-36 h-8 rounded-md cursor-pointer border border-content4'
          style={{ background: color }}
        />
      </PopoverTrigger>
      <PopoverContent>
        <SketchPicker
          color={color}
          onChange={handleChange}
          className='!bg-transparent !shadow-none'
        />
      </PopoverContent>
    </Popover>
  );
};

export default ColorPicker;
